<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>自由行-引导页</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/me.css">
</head>
<body>
<!-- 过度 -->
<div class="warp">
    <a href="javascript:;" class="top-a"><i class="time">5</i>跳过</a>
    <div class="logo">
        <img src="images/logo.png" alt="" />
        <p>自由行</p>
    </div>
    <div class="wa-txt">
        <h3 class="title">自由行，不穷游 </h3>
        <p>会赚钱的游记</p>
    </div>
</div>

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide one">
            <a class="skip" href="index.html">跳过</a>
            <div class="txt">
                <p class="txt-title">迷茫</p>
                <p class="text">你可能在旅途中感到迷茫<br>孤立无援？</p>
            </div>
        </div>
        <div class="swiper-slide tow">
            <a class="skip" href="index.html">跳过</a>
            <div class="txt">
                <p class="txt-title">迷失</p>
                <p class="text">你可曾在旅途中迷失方向<br>不知所措？</p>
            </div>
        </div>
        <div class="swiper-slide there">
            <div class="txt">
                <p class="txt-title">欢乐出行</p>
                <p class="text">全新有趣的旅游攻略</p>
                <a class="experience" href="index.html">立即体验</a>
            </div>
        </div>

    </div>
    <div class="swiper-pagination"></div>
</div>







<script src="js/swiper.min.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination',
        },resistanceRatio : 0
    });

    var topA = document.querySelector(".top-a");
    var warp = document.querySelector(".warp");
    topA.onclick=function (){
        warp.style.display = 'none'
    }
    var tim = document.querySelector(".time");
    setInterval(function(){
        tim.innerHTML --;
    },1000)
    setTimeout(function(){
        warp.style.display = 'none'
    },5000)
</script>
</body>
</html>